<template>
  <div>
    <van-nav-bar
      title="微信支付"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>
import Vue from "vue"
// 引入QRcode插件
import QRCode from "qrcode"
import axios from "axios";

Vue.use(QRCode)
export default {
  data() {
    return{
      orers:''
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    useqrcode(url) {
      var canvas = document.getElementById("canvas");
      QRCode.toCanvas(canvas, url, function (error) {
        if (error) {
          console.log(error);
        } else {
          console.log("success!");
        }
      });
    }
  },
  mounted() {
    this.axios.get(`wxpay/getQrCodeUrl?orers=${this.orers}`).then((res) => {
      console.log(res.data)
      this.useqrcode(res.data);
    })
    //当检测到订单状态为success的时候，跳转到支付成功页面
    this.axios.get(`wxpay/orderquery?orers=${this.orers}`).then((ress) => {
      console.log(ress.data)
      if (ress.data == 'timeout') {
        console.log("请求超时")
      }
      if (ress.data == 'fail') {
        console.log('请求失败')
      }
      if (ress.data == 'success') {
        console.log('请求成功')
        this.$router.push("/Qrcodesussces")
      }
    })
  },
  created() {
    this.orers=localStorage.getItem('orers')
  }
}


</script>

<style scoped>

</style>

